<template>
    <el-form :label-position="labelPosition" label-width="120px" :model="user">
        <el-form-item label="账号">
            <el-col :span="5">
                <el-input v-model="user.account" :readonly="true" ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="姓名">
            <el-col :span="5">
                <el-input v-model="user.name" :readonly="true"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="手机号">
            <el-col :span="5">
                <el-input v-model="user.phone" :readonly="true"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="类型">
            <el-col :span="5">
                <el-input v-model="roleName" :readonly="true"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="推广二维码">
            <div class="block">
                <el-image :src="src"></el-image>
            </div>
        </el-form-item>
        <el-form-item label="下载二维码">
            <div>
                <el-button type="primary" icon="el-icon-download" @click="qrCodeDownLoad()">下载二维码</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
    import {mapGetters} from "vuex";
    import {userInfo} from "@/api/base/member/myInfo";
    export default {
        data () {
            return {
                labelPosition: 'right',
                user: {},
                QrCode: '',
                roleName:'',
                src: ''
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList () {
                return {

                };
            },
        },
        methods: {
            // 点击下载图片
            qrCodeDownLoad() {
                const imgUrl = this.src;
                // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
                if (window.navigator.msSaveOrOpenBlob) {
                    let bstr = atob(imgUrl.split(",")[1]);
                    let n = bstr.length;
                    let u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    let blob = new Blob([u8arr]);
                    window.navigator.msSaveOrOpenBlob(blob, "我的邀请码" + "." + "png");
                } else {
                    // 这里就按照chrome等新版浏览器来处理
                    let a = document.createElement("a");
                    a.href = imgUrl;
                    a.setAttribute("download", "我的邀请码");
                    a.click();
                }
            }
        },
        //初始化加载数据
        created() {
            userInfo().then(res => {
                if (res.status == 200) {
                    if (res.data.code == 200) {
                        this.user = res.data.data.user;
                        this.roleName = res.data.data.roleName;
                        //base64位图片转换
                        this.src = "data:image/png;base64,"+res.data.data.QrCode;
                    } else {
                        this.$message.error(res.data.message);
                    }
                } else {
                    this.$message.error("请求接口出错");
                }
            });
        },
    }
</script>

<style scoped>

</style>